<template>
  <div class="farmsStockStatistics">
    <div class="backFont"><el-button icon="el-icon-arrow-left" @click="back()">返回</el-button></div>
    <!-- 搜索框 -->
    <div class="searchBox">
      <div>
        <el-select @change="getSearch()" v-model="params.agriType" class="searchInp"  clearable placeholder="请选择农资类别">
          <el-option
            v-for="item in NZZLlist"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <!-- 入库方式 -->
        <el-select
          v-if="pageId === '1'"
          v-model="params.receiptType"
          @change="getSearch()"
          clearable
          class="searchInp"
          placeholder="请选择入库类型"
        >
          <el-option
            v-for="item in receiptType"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <!-- 农事类型 -->
        <!-- <el-select
          v-model="params.farmingType"
          class="select"
          placeholder="农事类型"
          v-if="this.$route.params.pageId === '2'"
        >
          <el-option
            v-for="item in receiptType"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select> -->
        <!-- <el-button type="primary" @click="search()">查 询</el-button> -->
      </div>
      <div class="flexTime">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="timeChange"
        >
        </el-date-picker>
        <div class="flexTimeBtn">
          <el-button type="primary" size="small" :class="pageId === '1' ? 'whiteGreenBtn': 'greyBtn'" @click="changePage('1')">
            入库记录
          </el-button>
          <el-button type="primary" size="small" :class="pageId === '2' ? 'whiteGreenBtn': 'greyBtn'" @click="changePage('2')">
            出库记录
          </el-button>
        </div>
      </div>
    </div>
    <!-- <table class="table" border="0" cellspacing="0">
      <thead>
        <tr class="tableHeader">
          <th class="name">农资名称</th>
          <th class="type">农资类型</th>
          <th class="specification">规格</th>
          <th class="stockType">{{pageId === '1'?'入库类型':'出库类型'}}</th>
          <th class="num">数量</th>
          <th class="time">时间</th>
          <th class="user">操作人</th>
        </tr>
      </thead>
      <tbody>
        <tr class="tbodyList" v-for="item in tableData" :key="item.index">
          <td class="name" style="text-align: left">
            <div class="farmsStockName">
              {{item.name}}
            </div>
            <div class="company">{{item.manufacturer}}</div>
          </td>
          <td class="type">{{item.type}}</td>
          <td class="specification">{{item.specifications}}</td>
          <td class="stockType">{{pageId === '1'?item.receiptType:'农事出库'}}</td>
          <td class="num">{{item.num}}</td>
          <td class="time">{{pageId === '1'?item.purchaseTime:item.applyTime}}</td>
          <td class="user">{{pageId === '1'?item.purchaser:item.applicant}}</td>
        </tr>
      </tbody>
    </table> -->
    <div class="tableList">
      <el-table
        class="list tableNewBox"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column label="农资名称">
          <template slot-scope="scope">
            <div>
              <div class="greyFlex"><span>{{ scope.row.name }} </span><span class="typeSpan">{{scope.row.type}}</span></div>
              <div class="greyColor">{{ scope.row.manufacturer }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格">
          <template slot-scope="scope">
            <span>{{ scope.row.specifications }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间">
          <template slot-scope="scope">
            <span>{{pageId === '1'?scope.row.purchaseTime:scope.row.applyTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <span :class="pageId === '1'? 'greenColorFt' : 'redColorFt'">{{pageId === '1'? '+' : '-'}}{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="pageId === '1'?'入库类型':'出库类型'">
          <template slot-scope="scope">
            <span>{{pageId === '1'?scope.row.receiptType:'农事出库'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作人">
          <template slot-scope="scope">
            <span>{{pageId === '1'?scope.row.purchaser:scope.row.applicant}}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              class="greenButton"
              icon="el-icon-view"
              @click="openDetail(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
       @current-change="handleCurrentChange"
        :current-page.sync="params.current"
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="params.pageSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getFarmsStockPurchasePageApi,
  getFarmsStockApplyPageApi
} from '@/api/farmStock'
import { getSysSonDictListApi } from '@/api/dict'
export default {
  name: 'SevencolorUserIndex',

  data () {
    return {
      params: {
        current: 1,
        pageSize: 6,
        startTime: '',
        endTime: '',
        agriType: '',
        receiptType: '',
        farmingType: '',
        baseId: ''
      },
      currentPage: 1,
      total: 1,
      NZZLlist: [], // 农资种类
      receiptType: [], // 入库类型
      time: [],
      tableData: [],
      pageId: ''
    }
  },

  mounted () {
    this.params.baseId = this.$store.getters.userInfo.baseId
    this.getfarmsStockStatistics(this.$route.params.pageId)
    this.getDict(this.$route.params.pageId)
    this.pageId = this.$route.params.pageId
  },

  methods: {
    changePage (page) {
      this.params.current = 1
      this.getfarmsStockStatistics(page)
      this.getDict(page)
      this.pageId = page
    },
    // 列表 pageId入库1 出库2
    async getfarmsStockStatistics (pageId) {
      if (pageId === '1') { // 入库
        this.params.type = 0
        const res = await getFarmsStockPurchasePageApi(this.params)
        this.tableData = res.data.records
        this.total = res.data.total
      } else if (pageId === '2') { // 出库
        this.params.type = 1
        const res = await getFarmsStockPurchasePageApi(this.params)
        this.tableData = res.data.records
        this.total = res.data.total
      } else {
        this.$router.push({
          path: '/shuzhongtian/farmsStock'
        })
      }
    },
    async getDict (pageId) {
      if (pageId === '1') {
        const res2 = await getSysSonDictListApi('RKLX')
        this.receiptType = res2.data.reverse()
      } else if (pageId === '2') {
        const res2 = await getSysSonDictListApi('NS')
        this.receiptType = res2.data
      }
      const res1 = await getSysSonDictListApi('NZZL')
      this.NZZLlist = res1.data
    },
    // 分页
    handleCurrentChange (val) {
      this.params.current = val
      this.getfarmsStockStatistics(this.$route.params.pageId)
    },
    // 时间触发
    timeChange () {
      this.params.startTime = this.time ? this.time[0] : ''
      this.params.endTime = this.time ? this.time[1] : ''
      this.getSearch()
    },
    // 搜索
    getSearch () {
      clearTimeout(this.setTime)
      this.setTime = setTimeout(() => {
        this.params.current = 1
        this.getfarmsStockStatistics(this.$route.params.pageId)
      }, 300)
    },
    search () {
      this.params.current = 1
      this.getfarmsStockStatistics(this.$route.params.pageId)
    },
    // 返回
    back () {
      this.$router.go(-1)
    },
    openDetail (data) {
      this.$router.push({
        path: '/shuzhongtian/farmsStockAddHas',
        query: {
          id: data.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.farmsStockStatistics {
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  padding: 1.0417vw;
  ::v-deep .el-range-separator {
    color: #999
  }
  .flexTime {
    display: flex;
    align-items: center;
  }
  .flexTimeBtn {
    display: flex;
    background: #F6F6F6;
    align-items: center;
    height: 40px;
    margin-left: 15px;
    padding: 0 5px;
    border-radius: 2px;
    .el-button {
      margin-left: 0;
    }
  }
  .searchBox {
    font-weight: 600;
    margin-bottom: 1.5vh;
    width: 100%;
    height: 11vh;
    line-height: 11vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    ::v-deep .el-select > .el-input {
      height: 3.5vw;
    }
    .searchInp {
      width: 220px;
      height: 0.75rem * 0.834;
      margin-right: 1vw;
    }
    .searchBtn {
      background-color: #6adfae;
      border: #80efb1;
      font-weight: 600;
      width: 5.8333vw;
      height: 3.125vw * 0.834;
    }
    .searchBtn:hover {
      background-color: #80efb1;
    }
  }
  .table {
    width: 78.125vw;
    thead {
      width: 77.0833vw;
      height: 4.1667vw * 0.834 !important;
      background-color: #e4e7e9;
      font-weight: 500;
      font-size: 1.25vw;
      color: #647f93;
    }
    .tbodyList {
      width: 77.0833vw;
      height: 8.3333vw * 0.834;
      border-radius: 0px 0px 0px 0px;
      font-size: 1.25vw;
      text-align: center;
      .name {
        width: 18.8333vw;
        padding-left: 0.7813vw;
      }
      .company {
        color: #999;
        margin-top: 0.8604vw;
      }
    }
    .tbodyList:nth-child(odd) {
      background: #f4f4f4;
    }
    .tbodyList:nth-child(even) {
      background: #fff;
    }
  }
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
.greyFlex {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  .typeSpan {
    line-height: 14px;
  }
}
.greyColor {
  font-size: 12px;
}
</style>
